<template>
  <div class="count">
    <el-descriptions class="margin-top" title="个人信息" :column="1" border>
      <template slot="extra">
        <el-button
          type="primary"
          size="small"
          @click="centerDialogVisible = true"
          >修改个人信息</el-button
        >
        <el-button
          type="warning"
          size="small"
          @click="centerDialogVisible1 = true"
          >修改密码</el-button
        >
        <el-button type="danger" size="small" @click="exitLogin"
          >退出登录</el-button
        >
      </template>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          头像
        </template>
        <el-avatar :size="100" :src="imgUrl + state.user.avatar" />
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          用户名
        </template>
        {{ state.user.userName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          昵称
        </template>
        {{ state.user.nickName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          手机号
        </template>
        {{ state.user.phone }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          性别
        </template>
        {{
          state.user.gender == 0 ? "女" : state.user.gender == 1 ? "男" : "保密"
        }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          邮箱
        </template>
        {{ state.user.email }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          订单数
        </template>
        {{ state.user.orders.length }}个
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          上传商品数
        </template>
        {{ state.user.goods.length }}个
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          注册日期
        </template>
        {{ state.user.createDate }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          角色
        </template>
        {{ state.user.role == "user" ? "用户" : "管理员" }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          用户状态
        </template>
        {{ state.user.state ? "正常" : state.user.state }}
      </el-descriptions-item>
    </el-descriptions>
    <el-dialog
      title="修改个人信息"
      :visible.sync="centerDialogVisible"
      width="50%"
      center
      destroy-on-close
    >
      <UserForm ref="editInfo" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editInfo">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="修改密码"
      :visible.sync="centerDialogVisible1"
      width="50%"
      center
      destroy-on-close
    >
      <PassForm ref="pass" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="changePass">修 改</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import UserForm from "../../../components/UserForm.vue";
import PassForm from "../../../components/PassWord.vue";
export default {
  name: "Count",
  data() {
    return {
      size: "medium",
      state: this.$store.state,
      centerDialogVisible: false,
      centerDialogVisible1: false,
      imgUrl: process.env.VUE_APP_BASE_API,
    };
  },
  methods: {
    changePass() {
      console.log(this.$refs.pass.ruleForm);
      this.$refs.pass.$refs.ruleForm.validate((valid, obj) => {
        if (valid) {
          this.axios
            .post("/api/v1/users/pass", { ...this.$refs.pass.ruleForm })
            .then((res) => {
              // console.log(res);
              this.msg(res, this);
              if (res.code == 1) {
                sessionStorage.removeItem("token");
                this.Cookie.del("token");
                this.$router.push("/login");
              }
            });
        }
      });
    },
    exitLogin() {
      this.Cookie.del("token");
      sessionStorage.removeItem("token");
      this.$router.push("/home");
      this.$store.commit("initUser", JSON.stringify({}));
      this.$message({
        message: "退出登录成功",
        type: "success",
      });
    },
    editInfo() {
      this.$refs.editInfo.$refs.ruleForm.validate((valid, obj) => {
        if (valid) {
          let params = this.$refs.editInfo.ruleForm;
          params.id = this.state.user._id;
          let file = this.$refs.editInfo.$refs.avatarEdit.uploadFiles;
          let uploadfile = null;
          var formdata = null;
          let config = {
            url: "/api/v1/users/edit",
            params,
            method: "post",
            headers: {
              "Content-Type": "multipart/form-data",
            },
          };
          if (file.length > 0) {
            uploadfile = file[0].raw;
          }
          if (uploadfile) {
            formdata = new FormData();
            formdata.append("avatar", uploadfile);
            config.data = formdata;
          } else {
            delete config.headers;
          }
          this.axios(config).then((res) => {
            if (res.code == 1) {
              this.$message({
                title: "提示",
                message: "修改成功",
                type: "success",
              });
              this.centerDialogVisible = false;
              let obj = { ...this.state.user, ...res.data };
              this.$store.commit("initUser", JSON.stringify(obj));
              // console.log(obj, res.data);
              // console.log(obj);
            } else {
              this.$message({
                title: "提示",
                message: "修改失败",
                type: "warning",
              });
            }
          });
        }
      });
    },
  },
  created() {
    // console.log(process.env.VUE_APP_BASE_API, "process.env.VUE_APP_BASE_API");
    // console.log(process.env.VUE_APP_BASE_API+this.state.user.avatar, "this.state.user.avatar");
  },
  components: { UserForm, PassForm },
};
</script>
<style scoped>
.el-descriptions__header {
  height: 40px;
}
.contain {
  width: auto;
}
</style>